<template>
  <div class="product">
    <div class="qk-type">
      <span style="width: 100px;">期刊类型：</span>
      <el-menu :default-active="active" style="margin: 0 auto;background: none;" mode="horizontal"
               @select="handleSelect">
        <el-menu-item v-for="(item,index) in type.types" :key="index" :index="item.id+''">{{ item.name }}</el-menu-item>
      </el-menu>
    </div>
    <book-list title="" :book-data="type.books"></book-list>
    <div style="width: 99%;display: flex">
      <div style="margin: -100px auto 50px;">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="type.page"
            :page-size="type.size"
            layout="total, prev, pager, next"
            :total="type.total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import bookList from "@/components/bookList.vue"

export default {
  name: "typeBook",
  // 注册组件
  components: {bookList},
  data() {
    return {
      type: {
        typeId: 1,
        books: "",
        types: '',
        page: 1,
        size: 10
      },
      active: '1'

    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getTypeBooks();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getTypeBooks();
    },
    getTypeBooks() {
      this.$api.book.getBooksByTypeAndName(
          this.type.page,
          this.type.size,
          this.type.typeId,
          ''
    ).then((res) => {
        var data = res.data;
        if (data.success) {
          this.type.books = data.content.records;
          this.type.total = data.content.total;
        } else {
          this.$message.error('服务器返回失败');
        }
      }).catch((resp) => {
        this.$message.error('数据获取失败' + resp);
      });
    },
    handleSelect(key, keyPath) {
      this.type.page = 1;
      this.type.typeId = key;
      console.log(key, keyPath);
      this.getTypeBooks();
    }
  },
  filters: {
    myFilter(value) {
      return parseFloat(value).toFixed(2);
    }
  },
  mounted() {
    this.handleSelect(this.type.typeId, "")
    //获取图书类型
    this.$api.bookType.getBookType().then((res) => {
      var data = res.data;
      if (data.success) {
        this.type.types = data.content;
        //console.log(res.data.content);
      } else {
        this.$message.error('服务器返回失败');
      }
    }).catch((resp) => {
      this.$message.error('服务器访问失败' + resp);
    })
  }
}
</script>

<style scoped>
.qk-type {
  width: 750px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

ul {
  list-style: none;
//display: flex;
}

li {
  list-style-type: none;
  display: inline;
}

a {
  text-decoration: none;
  cursor: pointer;
}

.select {
  background-color: red;
}
</style>
